<template>
  <div class="person-info">
    <div class="pageheader">
      <XHeader :left-options="{backText:''}" :title="xheader.title" class="XHeader"></XHeader>
    </div>
    <div class="page">
      <div class="person-info-form">
        <div class="person-info-form-item person-info-form-user">
          <span>账号</span>
          <input type="text" readonly :value="userInfo.employee_name" @focusout="inputBlur" @focusin="inputFocus">
        </div>
        <div class="person-info-form-item">
          <span>旧密码</span>
          <input type="password" placeholder="请输入旧密码" v-model="form.pass_source" @focusout="inputBlur" @focusin="inputFocus">
        </div>

        <div class="person-info-form-item">
          <span>新密码</span>
          <input type="password" maxlength="16" placeholder="新密码" v-model="form.pass_new" @focusout="inputBlur" @focusin="inputFocus">
        </div>
        <div class="person-info-form-item">
          <span>确认密码</span>
          <input type="password" maxlength="16" placeholder="请确认密码" v-model="form.pass_entry" @focusout="inputBlur" @focusin="inputFocus">
        </div>
        <div class="person-info-form-item person-info-form-tip">提示：请输入8-16位字符的密码,且包含数字,大小写字母，特殊字符任意三种</div>
      </div>
      <div class="block" style="margin-top: 32px">
        <button class="button" @click="onRevision()">确认修改</button>
      </div>
    </div>
  </div>
</template>

<script>
  import Me from '@/dll/me'
  import { md5 } from 'vux'
  export default {
    name: 'modifyPass',
    data () {
      return {
        xheader: {
          title: '修改密码'
        },
        padReg: /(?![a-zA-Z]+$)(?![A-Z0-9]+$)(?![A-Z\\W_]+$)(?![\d\W]+$)(?![a-z0-9]+$)(?![a-z\\W_]+$)(?![0-9\\W_]+$)(^[a-zA-Z0-9\W_]{8,16}$)/,
        form: {
          pass_source: '',
          pass_new: '',
          pass_entry: ''
        },
        userInfo: {}
      }
    },
    created () {
      this.userInfo = this.globalData.userInfo
    },
    methods: {
      async onRevision () { // 确认修改
        if (!this.form.pass_source.trim()) {
          this.$vux.toast.text('旧密码不能为空')
          return
        }
        if (!this.padReg.test(this.form.pass_new)) {
          this.$vux.toast.text('请输入8-16位字符的密码,且包含数字,大小写字母，特殊字符任意三种')
          return
        }
        if (this.form.pass_new !== this.form.pass_entry) {
          this.$vux.toast.text('两次密码输入不一致')
          return
        }
        let params = {
          pass_source: md5(this.form.pass_source),
          pass_new: md5(this.form.pass_new),
          pass_entry: md5(this.form.pass_entry)
        }
        let res = await Me.MallChangePass(params)
        if (res.code == 0) {
          this.$vux.toast.text('修改成功')
          this.logout()
        } else {
          this.$vux.alert.show({
            title: '提示',
            content: res.msg
          })
        }
      },

      logout () {
        sessionStorage.clear()
        localStorage.removeItem('userInfo')
        localStorage.removeItem('accesstoken')
        this.$router.replace({ name: 'login' })
      }
    }
  }
</script>

<style lang="less">
  * {
    box-sizing: border-box;
  }

  .person-info {
    /*background: #fff;*/
    padding: 20px 12px;
    margin-top: 2px;
    font-size: 15px;

    .person-info-form-item {
      display: flex;
      margin: 15px 0;
      align-items: center;
    }

    .person-info-form-user {
      border-bottom: 1px solid #e6e6e6;
      span, input {
        color: rgba(0, 0, 0, 0.35);
      }
      input {
        border: none;
      }

      input:focus {
        border: none;
      }
    }

    span {
      width: 70px;
      color: #000;
    }

    input {
      border-bottom: 1px solid #e6e6e6;
      padding: 0 10px;
      height: 40px;
      background: none;
      flex: 1;
      outline: none;
      font-size: 15px;
    }

    input:focus {
      border-bottom: 1px solid #86ffa1;
    }

    .person-info-form-tip {
      font-size: 13px;
      color: #bbb3b3;
    }
  }
</style>
